import React, { useState } from 'react'
import useSaveLink from './useSaveLink'
import style from './ApplyForm.module.scss'
export default function ApplyForm():React.ReactElement {
    const { linkForm, save,handleLinkForm } = useSaveLink()
    const [isShow,setIsShow] = useState(false)
    const clickLetter = () => {
        setIsShow(true)
      }
  return (
    // 添加友链
    <div onClick={clickLetter} className={`${style['form-wrap']} ${isShow?style['is-show']:''}`} >
        {/* 信封上面 */}
        <img
      className={style['before-img']}
      src="http://img.xjlyh.site/2023/09/25/af7875f1e72e4237abc11b374457a456.png"
      style={{width: '100%'}}
    />
    {/* 信 */}
    <div className={style.envelope} style={{animation: 'hideToShow 2s'}}>
    <div className={style['form-main']}>
    <img
          src="http://img.xjlyh.site/2023/09/25/cdd0613b561a46978d2473179d51c077.jpg"
          style={{width: '100%'}}
        />
        
        <div>
          <h3 className={style['welcome-tip']}>有朋自远方来</h3>
          <div className={style['form-friend']}>
            <div className={style['form-item']}>
              <span> 名称：</span>
              <input className={style['form-input']} maxLength={120} value={linkForm.name} onChange={(e)=> handleLinkForm(e,'name')}/>
            </div>
            <div className={style['form-item']}>
              <span className={style['form-label']}> logo：</span>
              <input className={style['form-input']} maxLength={120} value={linkForm.logo} onChange={(e)=> handleLinkForm(e,'logo')}/>
            </div>
            <div className={style['form-item']}>
              <span className={style['form-label']}> 网址：</span>
              <input className={style['form-input']} maxLength={120} value={linkForm.address} onChange={(e)=> handleLinkForm(e,'address')}/>
            </div>
            <div className={style['form-item']}>
              <span className={style['form-label']}> 描述：</span>
              <input className={style['form-input']} maxLength={120} value={linkForm.description} onChange={(e)=> handleLinkForm(e,'description')}/>
            </div>
          </div>

          <div className="flex flex--c" style={{marginTop: '20px'}}>
            <button className={style['submit-btn']} onClick={()=>save()}>提交</button>
          </div>
          <div>
            <img
              src="http://img.xjlyh.site/2023/09/25/a337c554b6284ed7a688ffd3df5da419.png"
              style={{width: '100%', margin: '5px auto'}}
            />
          </div>
          <p style={{fontSize: '12px', textAlign: 'center', color: '#999'}}>欢迎交换友链</p>
        </div>


    </div>
    </div>
<img
      className={style['after-img']}
      src="http://img.xjlyh.site/2023/09/25/212bec993689423ca79ffbc030e3b23a.png"
      style={{width: '100%'}}
    />
    </div>
  )
}
